<template>
  <div id="app-container" style="padding: 30px">
    <!-- 列表 -->
    <el-table :data="dispOrdRlsList" border fit highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="调度指令编号">
        <template slot-scope="scope">
          <el-link type="primary" @click="toRelease(scope.row.id)">{{ scope.row.orderCode }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="orderName" label="指令名称"/>
      <el-table-column label="指令优先级" width="100">
        <template slot-scope="scope">
          {{
          scope.row.orderPriority === 1 ? '一级' :
          scope.row.orderPriority === 2 ? '二级' :
          scope.row.orderPriority === 3 ? '三级' : '四级'
          }}
        </template>
      </el-table-column>
      <el-table-column label="指令专业类型">
        <template slot-scope="scope">
          {{
          scope.row.orderStatus === 1 ? '生产调度指令' :
          scope.row.orderStatus === 2 ? '安全调度指令' :
          scope.row.orderStatus === 3 ? '开工调度指令' : '培训调度指令'
          }}
        </template>
      </el-table-column>
      <el-table-column prop="orderTransfer" label="指令下达人" width="100"/>
      <el-table-column prop="orderRelease" label="指令传达人" width="100"/>
      <el-table-column prop="releaseTime" label="下达时间"/>
      <el-table-column prop="releaseStatus" label="指令下达状态" width="110">
        <template slot-scope="scope">
          {{ scope.row.releaseStatus === 1 ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column prop="orderDescript" label="指令描述"/>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      :page-size="pageSize"
      :current-page="pageNo"
      :total="total"
      :pager-count="11"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="query">
    </el-pagination>
    <!-- 下达对话框 -->
    <el-dialog
      title="集团调度指令信息"
      :visible.sync="releaseDialogVisible"
      width="50%">
      <el-form label-width="130px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="调度指令编号">
              {{ dispOrdRls.orderCode }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="指令名称">
              {{ dispOrdRls.orderName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="优先级">
              {{
              dispOrdRls.orderPriority === 1 ? '一级' :
              dispOrdRls.orderPriority === 2 ? '二级' :
              dispOrdRls.orderPriority === 3 ? '三级' : '四级'
              }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业类型">
              {{
              dispOrdRls.orderStatus === 1 ? '生产调度指令' :
              dispOrdRls.orderStatus === 2 ? '安全调度指令' :
              dispOrdRls.orderStatus === 3 ? '开工调度指令' : '培训调度指令'
              }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="指令描述">
              {{ dispOrdRls.orderDescript }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="3" :offset="5">
            <el-form-item>
              <el-button :disabled="releaseBtnDisabled" type="primary" @click="updateRelease()">下达</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item>
              <el-button type="primary" @click="releaseDialogVisible = false">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import dispordrls from '@/api/pms/dispordrls'

  export default {
    data() {
      return {
        dispOrdRlsList: [], // ## 数据列表
        dispOrdRlsQuery: {}, // ## 查询条件封装对象
        total: 0, // ## 总记录数
        pageNo: 1, // ## 页码
        pageSize: 5, // ## 每页显示记录数
        multipleSelection: [], // ## 记录表格复选框选中的值
        dispOrdRls: {},
        releaseDialogVisible: false,
        releaseBtnDisabled: false
      }
    },
    created() {
      this.query()
    },
    methods: {
      query(pageNo = 1) {
        this.pageNo = pageNo
        dispordrls.findPage(this.pageNo, this.pageSize)
          .then(response => {
            this.dispOrdRlsList = response.data.item.content
            this.total = response.data.item.totalElements
          })
      },
      handleSelectionChange(val) { // ## 复选框改变时触发该事件
        this.multipleSelection = val
        console.log(val)
      },
      toRelease(id) {
        this.releaseDialogVisible = true
        //调用disprod的回显方法
        dispordrls.view(id)
          .then(response => {
            this.dispOrdRls = response.data.item
          })
      },
      updateRelease() {
        this.releaseBtnDisabled = true
        dispordrls.updateRelease(this.dispOrdRls.id)
          .then(response => {
            this.releaseDialogVisible = false
            this.$message({
              type: 'success',
              message: '下达成功'
            })
            this.query()
          })
      }
    }
  }
</script>

